<template name="protocol-popup">
  <view>
    <u-transition :show="showPopup" mode="fade" :duration="300">
      <view class="popup_mask" @touchmove.stop.prevent></view>
    </u-transition>
    <view class="popup_content">
      <u-transition :show="showPopup" mode="fade-up" :duration="300">
        <view class="popup_content_text">
          <view class="title">{{ title }}</view>
          <view class="explain_text">
            <view class="line">
              <p>感谢选择耘商，我们非常重视您的个人信息安全和隐私保护。依据最新法律要求，使用我们的产品前，请仔细阅读并同意
                <navigator :url="protocolPath" class="path" hover-class="navigator-hover">《用户服务协议》
                </navigator>和<navigator :url="policyPath" class="path" hover-class="navigator-hover">
                  《隐私政策》</navigator>
                ，以便我们向您提供更优质的服务!
              </p>
              <p>我们承诺将尽全力保护你个人信息及合法权益，再次感谢您的信任!</p>
            </view>
          </view>

          <view class="button">
            <u-button type="primary" shape="circle" text="同意并继续" @tap="confirm" color="#1890ff"
              style="color:#fff !important;"></u-button>
            <u-button type="default" shape="circle" text="暂不使用" @tap="back"></u-button>
          </view>
        </view>
      </u-transition>
    </view>
  </view>
</template>

<script>
export default {
  name: "lyg-popup",
  props: {
    title: {
      type: String,
      default: "服务协议和隐私政策"
    },
    // 协议路径
    protocolPath: {
      type: String
    },
    // 政策路径
    policyPath: {
      type: String
    },
    policyStorageKey: {
      type: String,
      default: "has_read_privacy"
    }
  },
  data() {
    return {
      showPopup: false,
      hasTabBar: true //是否有tabBar
    }
  },
  created() {
    if (uni.getStorageSync(this.policyStorageKey)) {
      this.showPopup = false;

      // if (this.hasTabBar) {
      //   uni.showTabBar({ animation: true });
      // }

    } else {
      this.showPopup = true;

      // if (this.hasTabBar) {
      //   uni.hideTabBar({ animation: true });
      // }

    }
  },
  methods: {
    // 禁止滚动
    clear() {
      return;
    },
    back() {
      this.showPopup = false;
      this.$emit('popupState', true);
      // #ifdef APP-PLUS
      plus.runtime.quit();
      // #endif
      if (this.hasTabBar) {
        uni.showTabBar({});
      }
    },
    // 关闭弹框
    confirm() {
      this.showPopup = false;
      this.$emit('popupState', true);

      uni.setStorage({
        key: this.policyStorageKey,
        data: true
      });

      if (this.hasTabBar) {
        uni.showTabBar({});
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.popup_mask {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition-property: opacity;
  transition-duration: 0.3s;
  opacity: 0;
  z-index: 98;
}

.popup_mask {
  opacity: 1;
}

.popup_content {
  box-sizing: border-box;
  position: fixed;
  width: 80%;
  top: 50%;
  left: 50%;
  z-index: 99;
  transform: translate(-50%, -50%);

  .popup_content_text {
    background-color: #ffffff;
    padding: 40upx 15upx 0;
    border-radius: 16rpx;
  }

  .title {
    text-align: center;
    font-size: 34upx;
    padding: 10upx 0 0 0;
  }

  .explain_text {
    font-size: 30upx;
    padding: 30upx 30upx 40upx 30upx;
    line-height: 38upx;

    .line {
      display: block;

      p {
        text-indent: 60upx;
        line-height: 40upx;
      }

      .path {
        text-indent: 0;
        color: #1890ff;
        display: inline-block;
        text-align: center;
      }
    }
  }

  .button {
    // display: flex;
    padding: 20upx;
    // align-items: center;
    font-size: 34upx;

    // justify-content: center;
    ::v-deep .u-button {
      color: #4E2D00 !important;
      margin-bottom: 10upx;
      font-size: 30upx;
    }

    view {
      text-align: center;
    }
  }
}
</style>
